<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  
    <meta name="keywords" content="前端,Vue.js,JavaScript,Node.js,小程序">
  
  
    <meta name="description" content="GuoYou.Li(李国有)的博客, 用于做学习过程中的笔记、总结以及知识分享">
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    使用 Node.js 和 npm 安装和配置 Yarn |
    
    种子的信仰</title>
  
    <link rel="shortcut icon" href="/your/favicon.ico">
  
  
<link rel="stylesheet" href="/your/css/style.css">

  
    
<link rel="stylesheet" href="/your/fancybox/jquery.fancybox.min.css">

  
  
<script src="/your/js/pace.min.js"></script>

<meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/your/atom.xml" title="种子的信仰" type="application/atom+xml">
</head>

<body>
<main class="content">
  <section class="outer">
  <article id="post-install-yarn-through-nodejs-and-npm" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

    <div class="article-inner">
        
            <header class="article-header">
                
  
    <h1 class="article-title" itemprop="name">
      使用 Node.js 和 npm 安装和配置 Yarn
    </h1>
  
  




            </header>
            

                
                    <div class="article-meta">
                        <a href="/your/2020/08/10/install-yarn-through-nodejs-and-npm/" class="article-date">
  <time datetime="2020-08-09T16:03:27.000Z" itemprop="datePublished">2020-08-10</time>
</a>
                            
  <div class="article-category">
    <a class="article-category-link" href="/your/categories/%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3/">问题解决</a> / <a class="article-category-link" href="/your/categories/%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3/Yarn/">Yarn</a>
  </div>

                    </div>
                    

                        
                            
    <div class="tocbot"></div>





                                

                                    <div class="article-entry" itemprop="articleBody">
                                        


                                            

                                                
                                                                    <h2 id="一-背景"><a href="#一-背景" class="headerlink" title="一.背景"></a>一.背景</h2><p>由于种种令人心酸的原因, 我决定卸载 <code>Node.js</code>, <code>npm</code>, 以及 <code>Yarn</code>, 再重新安装</p>
<h2 id="二-安装-Nodejs-和-npm"><a href="#二-安装-Nodejs-和-npm" class="headerlink" title="二.安装 Nodejs 和 npm"></a>二.安装 Nodejs 和 npm</h2><h3 id="1-安装"><a href="#1-安装" class="headerlink" title="1.安装"></a>1.安装</h3><p><a href="http://nodejs.cn/download/" target="_blank" rel="noopener">下载 Node.js</a> 安装程序, 过程基本都是点击 <code>next</code> 按钮即可, 不再赘述</p>
<p>我的安装目录 <code>D:\Program Files\Nodejs</code>, 安装完成后, <code>npm</code> 也被安装到了电脑上</p>
<p>可以通过命令查看是否已经正确安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 查看版本</span></span><br><span class="line">node -v</span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看版本</span></span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure>

<h3 id="2-配置"><a href="#2-配置" class="headerlink" title="2.配置"></a>2.配置</h3><p>为了方便管理和不占用电脑的C盘容量, 我需要修改 npm 全局依赖包下载保存目录和缓存目录</p>
<p>在 <code>Node.js</code> 的安装目录下新建文件夹 <code>node_cache</code> 和 <code>node_global</code></p>
<p>然后执行命令</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 全局依赖包缓存目录</span></span><br><span class="line">npm config <span class="built_in">set</span> cache <span class="string">"D:\Program Files\Nodejs\node_cache"</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 全局依赖包下载保存目录</span></span><br><span class="line">npm config <span class="built_in">set</span> prefix <span class="string">"D:\Program Files\Nodejs\node_global"</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看配置列表</span></span><br><span class="line">npm config list</span><br></pre></td></tr></table></figure>

<p>看到下面的东西就代表成功了</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># ...</span></span><br><span class="line">userconfig C:\Users\guoyo\.npmrc</span><br><span class="line">cache = <span class="string">"D:\\Program Files\\Nodejs\\node_cache"</span></span><br><span class="line">prefix = <span class="string">"D:\\Program Files\\Nodejs\\node_global"</span></span><br><span class="line"><span class="comment"># ...</span></span><br></pre></td></tr></table></figure>

<p>当然, 也可以直接打开目录 <code>C:\Users\[your-computer-name]\.npmrc</code>, 找到 <code>.npmrc</code> 这个文件, 查看里面的内容</p>
<h2 id="三-安装与配置-Yarn"><a href="#三-安装与配置-Yarn" class="headerlink" title="三.安装与配置 Yarn"></a>三.安装与配置 Yarn</h2><h3 id="1-执行命令全局安装-yarn"><a href="#1-执行命令全局安装-yarn" class="headerlink" title="1.执行命令全局安装 yarn"></a>1.执行命令全局安装 <code>yarn</code></h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 全局安装</span></span><br><span class="line">npm i -g yarn</span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看版本</span></span><br><span class="line">yarn version</span><br></pre></td></tr></table></figure>

<h3 id="2-修改-yarn-全局安装依赖包目录与缓存目录"><a href="#2-修改-yarn-全局安装依赖包目录与缓存目录" class="headerlink" title="2.修改 yarn 全局安装依赖包目录与缓存目录"></a>2.修改 yarn 全局安装依赖包目录与缓存目录</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 查看全局安装依赖包保存目录</span></span><br><span class="line">yarn global dir</span><br><span class="line"><span class="comment"># 默认 C:\Users\[your-computer-name]\AppData\Local\Yarn\Data\global</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看全局安装依赖包缓存目录</span></span><br><span class="line">yarn cache dir</span><br></pre></td></tr></table></figure>

<p>在 <code>Yarn</code> 的安装目录(D:\Program Files\Nodejs\node_global)下新建文件夹 <code>yarn_cache</code> 和 <code>yarn_global</code></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 配置 yarn 全局安装依赖包保存目录</span></span><br><span class="line">yarn config <span class="built_in">set</span> global-folder <span class="string">"D:\Program Files\Nodejs\node_global\yarn_global"</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 配置缓存目录</span></span><br><span class="line">yarn config <span class="built_in">set</span> cache-folder <span class="string">"D:\Program Files\Nodejs\node_global\yarn_cache"</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看保存目录配置</span></span><br><span class="line">yarn global dir</span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看缓存目录配置</span></span><br><span class="line">yarn cache dir</span><br></pre></td></tr></table></figure>

<p><strong>同 npm, 也可以直接打开目录 <code>C:\Users\[your-computer-name]\.yarnrc</code>, 找到 <code>.yarnrc</code> 这个文件, 查看里面的内容</strong></p>
<h2 id="四-测试"><a href="#四-测试" class="headerlink" title="四.测试"></a>四.测试</h2><p><strong>特别介绍: 用 <code>rimraf</code> 删除超级大, 层级深的目录, 比如 node_modules, 非常方便</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 全局安装 rimraf</span></span><br><span class="line">yarn global add rimraf</span><br></pre></td></tr></table></figure>

<p>可以看到在 <code>D:\Program Files\Nodejs\node_global\yarn_global\node_modules\.bin</code></p>
<p><img src="https://gitee.com/liguoyou/pic/raw/master/images/2020-08-10_00-51-00.png" alt="yarn global 安装目录"></p>
<p>测试: 桌面新建一个文件夹 aaa_modules, 在桌面打开 <code>git bash</code> 终端: </p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 删除文件夹</span></span><br><span class="line">rimraf aaa_modules</span><br></pre></td></tr></table></figure>

<p><strong>报错</strong>: bash: rimraf: command not found</p>
<p>这时, 还需要配置环境变量, 才能使 <code>yarn</code> 全局安装的依赖包命令生效</p>
<p>将路径URL:  <code>D:\Program Files\Nodejs\node_global\yarn_global\node_modules\.bin</code> 复制到: </p>
<p>控制面板 - 系统属性 - 高级系统设置 - 高级 - 环境变量 - 系统变量 - Path - 编辑 - 新增 - <strong>输入内容 URL</strong> - 确定 - 确定 - 确定</p>
<p><img src="https://gitee.com/liguoyou/pic/raw/master/images/2020-08-10_00-59-38.png" alt="yarn global 环境变量配置"></p>
<p><strong>重启终端, 再次输入命令, 即可</strong> (win7 可能需要重启电脑才生效!)</p>
<p><code>Yarn</code> 就重新安装完成了!</p>
<p>文章很短, 但是过程很坎坷, 遇事不要烦躁, 慢慢来</p>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a href="https://www.cnblogs.com/Jimc/p/11121632.html" target="_blank" rel="noopener">修改Yarn的全局安装和缓存位置 - cnblogs</a></p>
<p><a href="https://www.jianshu.com/p/13f45e24b1de" target="_blank" rel="noopener">Nodejs安装及环境配置 - 简书</a></p>

                                                                        
                                    </div>
                                    <footer class="article-footer">
                                        <!-- 注释 - 分享按钮 -->
                                        <!-- <a data-url="http://liguoyou.gitee.io/your/2020/08/10/install-yarn-through-nodejs-and-npm/" data-id="cl0gvpjqm000um4ongff2htkc" class="article-share-link">
                                            分享
                                        </a> -->
                                        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/Yarn/" rel="tag">Yarn</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/npm/" rel="tag">npm</a></li></ul>

                                    </footer>

    </div>

    
        
  <nav class="article-nav">
    
      <a href="/your/2020/08/14/string-prototype-padStart-and-padEnd/" class="article-nav-link">
        <strong class="article-nav-caption">前一篇</strong>
        <div class="article-nav-title">
          
            JavaScript 内置对象 String 的 padStart() 和 padEnd() 方法
          
        </div>
      </a>
    
    
      <a href="/your/2020/06/27/close-issues-notifications/" class="article-nav-link">
        <strong class="article-nav-caption">后一篇</strong>
        <div class="article-nav-title">如何关闭 Github issues 中的邮件通知</div>
      </a>
    
  </nav>


            

                
                    
                        
  <div class="gitalk" id="gitalk-container"></div>
  <p style="color: #999; font-size: 12px; text-align: center;">
    第三方评论系统 -- Gitalk: 偶尔可能出现加载失败的情况, 您可以选择刷新或者前往 
    <a href="https://github.com/liguoyou/your/issues" target="_blank">issues</a>
    提交和查看评论
  </p>
  
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">

  
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

  
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '2e731d2b04096a7c71ab',
      clientSecret: '41e2e15eb8edebd8efd5a6da558a44d60f33468a',
      repo: 'your',
      owner: 'liguoyou',
      admin: ['liguoyou'],
      // id: location.pathname,      // Ensure uniqueness and length less than 50
      id: md5(location.pathname),
      distractionFreeMode: false,  // Facebook-like distraction free mode
      pagerDirection: 'last'
    })

  gitalk.render('gitalk-container')
  </script>

                            

</article>
</section>
  <footer class="footer">
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>
  
    <li><i class="fe fe-bookmark"></i> <span id="busuanzi_value_page_pv"></span></li>
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2022 种子的信仰</li>
      <li>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
      <li>Theme  <a href="https://github.com/zhwangart/hexo-theme-ocean" target="_blank" rel="noopener">Ocean</a></li>
    </ul>
  </div>
</footer>

</main>
<aside class="sidebar">
  <button class="navbar-toggle"></button>
<nav class="navbar">
  
    <div class="logo">
      <a href="/your/"><img src="/your/images/logo.png" alt="种子的信仰"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/">首页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/archives">时间轴</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/gallery">相册</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/categories">分类</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/tags">标签</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="搜索">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <div class="totop" id="totop">
  <i class="fe fe-rocket"></i>
</div>
    </li>
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/your/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="请输入关键词...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
</aside>

<script src="/your/js/jquery-2.0.3.min.js"></script>


<script src="/your/js/jquery.justifiedGallery.min.js"></script>


<script src="/your/js/lazyload.min.js"></script>


<script src="/your/js/busuanzi-2.3.pure.min.js"></script>


  
<script src="/your/fancybox/jquery.fancybox.min.js"></script>




  
<script src="/your/js/tocbot.min.js"></script>

  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
    });
  </script>


<script src="/your/js/ocean.js"></script>


</body>
</html>